<template>
    <el-select v-model="optionValue" clearable :placeholder="$t('diocese')">
        <el-option
            v-for="item in lists"
            :label="item.title"
            :value="item.id"
            :key="item.id"
        ></el-option>
    </el-select>
</template>
<script>
import { getDioceseAll } from '../../api/diocese';
export default {
  name : 'DioceseSelect',
  props: ['nowValue','provinceAdcode'],
  data(){
    return {
      optionValue : this.nowValue,
      lists:[]
    }
  },
  methods:{
    async setList(){
      if(!this.provinceAdcode) return;
      let response = await getDioceseAll({province_adcode:this.provinceAdcode});
      if(response.status == 200 && response.data.data){
        this.lists = response.data.data;
      }
    }
  },
  watch:{
    provinceAdcode(newVal){
      this.setList();
    },
    optionValue(newVal){
      this.$emit('update:nowValue',newVal);
    },
    nowValue(newVal){
      this.optionValue = newVal;
    }
  }
};
</script>
